<template>
	<view class="">
		
	
	<view class="cc">
		<view class="xing">
			<label for="">姓：</label>	<input v-model="xing" maxlength="2" class="xingming" type="text" />
		</view>
	
		<!--设置监听器，当点击radio时调用-->
		<radio-group @change="listenerRadioGroup">
		<!--label通常与radio和checkbox结合使用-->
		    <label style="display: flex;padding-top: 10rpx">
				性别：
		        <radio value="男" checked="true"/>男
				 <radio value="女" />女
		    </label>
		</radio-group>
	</view>
	<view class="start" @click="start">
		<text>生成</text>
	</view>
	<view class="mingzi">
		<view class="mingzi_" v-for="(item,index) in list" @click="jumpzidian(item)">
			<text>{{item}}</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			indexSelect: "请选择性别",
			arraySelect: ['男', '女'],
			xing:'',
			list:[],
			sex:'male',
			}
		},
		onShareAppMessage(res) {
				wx.showShareMenu({
				     withShareTicket: true,
				     menus: ['shareAppMessage', 'shareTimeline']
				    })
				return{
						title:"名字生成器",
						imageUrl:"https://www.leedong.top/img/suangua1.jpg",
				}
				
				},
				//2.分享到朋友圈
		onShareTimeline(){
		
			return {
				title: '名字生成器',
				 imageUrl:"https://www.leedong.top/img/suangua1.jpg"
				
			}
		},
		methods: {
			jumpzidian(item){
				uni.navigateTo({
					url:"/pages/xmscq/details?name="+item
				})
			},
			 isChineseChar(char) {
			    var regex = /[\u4e00-\u9fa5]/;
			    return regex.test(char);
			},
			 
			// 示例使用
			
			listenerRadioGroup(e){
				this.sex=e.detail.value=='男'?'male':'female';
			},
			start(){
			
				let hanzi=this.isChineseChar(this.xing)
				if(!this.xing){
					uni.showToast({
						title:"请输入姓",
						icon:'none'
					})
					return;
				}
				if(!hanzi){
					uni.showToast({
						title:"姓输入不合法",
						icon:'none'
					})
					return;
				}
				uni.showLoading({
					title:'生产中'
				})
			
				 this.$api.scxm({xing:this.xing,sex:this.sex,count:50}).then((res)=>{
					 console.log(res)
					 this.list=res.data;
					 uni.hideLoading()
				 })
			}
		}
	}
</script>

<style lang="scss">
	.cc{
		width: 100%;
		padding-top: 20px;
		display: flex;
		justify-content: space-around;
	}
	.xing{
		display: flex;
		align-items: center;
		padding-left: 10px;
	}
.xingming{
	width: 90%;
	padding-left: 20px;
	margin: auto;
	border-radius: 10px;
	height: 30px;
	border: 1px solid #ccc;
}
.mingzi{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;

	margin-top: 20rpx;
	.mingzi_{
	    margin-top: 20rpx;
	    width: 30%;
	    text-align: center;
	    color: #ca635e;
	    border: 1px solid #e5e5e5;
	    height: 50px;
	    line-height: 50px;
	    border-radius: 10px;
	
		text{
			font-size: 35rpx;
			padding-top: 10rpx;
			padding-bottom: 10px;
		    border-bottom: 1px solid;
			user-select: all;
			
		}
	}
}
.start{
		width: 100%;
		text-align: center;
		text{
			width: 120px;
			display: inline-block;
			background-color: #e32616;
			font-size: 30rpx;
			color: #fff;
			padding: 10px;
			border-radius: $uni-border-radius-base;
			line-height: 15px;
			margin-top: 20px;
		}
		
	}
</style>
